<template>
  <div class="fullMain">
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert">{{alertText}}</alert>
    </div>
    <!--顶部标题 -->
    <div style="position:fixed; width:100%">
      <x-header class="header" :left-options="{backText: '阶段目标',showBack: true}">
        <a slot="right" @click="deleteTask">删除</a>
      </x-header>
    </div>
    <div style="height:20px; background-color:rgb(237,237,237)" />
    <TaskCard :taskItem.sync="taskItem" isOverview.sync="isOverview"></TaskCard>
    <divider>阶段目标</divider>

    <ul v-if="goalsList!==''&& goalsList!==undefined && goalsList.length !== 0" class="goalsList">
      <li v-for="(item,index) in goalsList" :key="index" @click="toGoalDetail(item)">
        <div class="left">
          <span class="goalTtile">{{item.goalContent}}</span>
          <div>
            <span>任务分工 {{item.placements.length}}</span>
            <!-- <span>已完成 1</span> -->
          </div>
        </div>
        <div class="xcircle">
          <x-circle
            :percent="item.progress"
            :stroke-width="6"
            :trail-width="6"
            :stroke-color="['#36D1DC', '#5B86E5']"
            trail-color="#ececec"
          >
            <span style="color:#36D1DC">{{ Math.round(item.progress) }}%</span>
          </x-circle>
        </div>
      </li>
    </ul>
    <div v-else class="temp">暂无阶段目标，赶快去填写吧</div>
    <div class="editButton" @click="showEditFun">
      <span>
        <img src="~static/img/report/add.png" height="35" width="35" alt @click="showEditFun" />
      </span>
    </div>
  </div>
</template>

<script>
import { XHeader, Group, XTextarea, XInput, Divider, XCircle } from "vux";
import TaskCard from "components/TaskCard/TaskCard.vue";
import task from "api/task";
export default {
  data() {
    return {
      alertText: "",
      isShowAlert: false,
      taskItem: "",
      jobContent: "",
      goalsList: [],
      isOverview: false,
    };
  },
  components: {
    TaskCard,
    XHeader,
    Group,
    XTextarea,
    XInput,
    Divider,
    XCircle,
  },
  computed: {},
  created() {
    this.getTaskItem();
  },
  watch: {},
  methods: {
    showAlert(alertText) {
      this.isShowAlert = true;
      this.alertText = alertText;
    },
    closeTip() {
      this.isShowAlert = false;
      this.alertText = "";
    },
    getTaskItem() {
      this.taskItem = localStorage.getItem("taskItem");
      if (!!this.taskItem) {
        this.taskItem = JSON.parse(this.taskItem);
      } else {
        this.taskItem = {};
      }
      this.getGoals(this.taskItem.projectId);
    },
    async getGoals(projectId) {
      const result = await task.postAllGoalOfOneTask(projectId);
      if (result.code == 1) {
        this.goalsList = result.data;
      } else if (result.code == 0) {
        this.goalsList = [];
      }
    },
    async addGoal() {
      const result = await task.postAddGoal();
    },
    showEditFun() {
      // 把goal清空
      localStorage.setItem("goal", "");
      localStorage.setItem('goalId','')
      this.$router.push({
        name: "CreateGoal",
        params: { taskItem: this.taskItem },
      });
    },
    toGoalDetail(item) {
      console.log('item');
      console.log(item);
      this.$router.push({ name: "CreateGoal" });
      localStorage.setItem("goal", JSON.stringify(item));
    },
    async deleteTask() {
      const result = await task.postDeleteTask(this.taskItem.projectId);
      if (result.code == 1) {
        this.showAlert("删除成功!");
        setTimeout(this.closeTip, 1000);
        this.$router.go(-1);
      } else if (result.code == 0) {
        this.showAlert(result.message);
      }
    },
  },
};
</script>
<style >
#app {
  background-color: white;
}
.fullMain {
  background: white;
  overflow: scroll;
}
</style>
<style lang="less" scoped>
.temp {
  line-height: 25px;
  padding: 5px 10px;
  background-color: #ffffff;
  border-radius: 10px;
  text-align: center;
  color: #b2b2b2;
  margin-top: 10px;
}
.goalsList {
  padding: 0;
  li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(237, 237, 237);
    padding: 10px 20px;
    .left {
      line-height: 25px;
      .goalTtile {
        font-size: 16px;
        font-weight: bolder;
      }
      div {
        span {
          font-size: 12px;
          margin-right: 5px;
          color: gray;
        }
      }
    }
    .xcircle {
      width: 60px;
      height: 60px;
    }
  }
}
.editButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 5px;
  background-color: white;
  border: 1px solid #32C3A7;
}
</style>